<template>
  <div class='edit-template-dialog'
       v-if="visible">
    <el-dialog :visible.sync="visible"
               width="660px"
               :title="(dialogStatus === 'create' ? '新增' : '编辑') + '检查模板'"
               :close-on-click-modal="false"
               @close="dialogClose">
      <el-form :model="editTplForm"
               :rules="formRules"
               ref="moduleForm"
               label-width="110px">
        <el-form-item label="检查模板名称"
                      prop="tpl_name">
          <el-input v-model="editTplForm.tpl_name"
                    placeholder="请输入检查模板名称">
          </el-input>
        </el-form-item>
        <el-form-item label="模板类型值"
                      prop="tpl_type_value">
          <el-select v-model="editTplForm.tpl_type_name"
                     placeholder="请选择模板类型"
                     @change="selectTplType"
                     value-key="value">
            <el-option v-for="(item) in tplTypeList"
                       :key="item.code_id"
                       :label="item.name"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查模块名称"
                      prop="check_module">
          <el-select v-model="editTplForm.check_module"
                     @change="selectCheckModule"
                     placeholder="请选择检查模块">
            <el-option v-for="item in checkModuleList.list"
                       :key="item.check_module_id"
                       :label="item.module_name"
                       :value="item.check_module_id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button @click="editModule"
                   type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { CommonCheckApi } from '@/services/SystemSetting'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    return {
      visible: false,
      editTplForm: {
        tpl_name: '',
        tpl_type: {},
        tpl_type_value: '',
        tpl_type_name: '',
        check_module: '',
        tpl_config: []
      },
      resetForm: {
        tpl_name: '',
        tpl_type: {},
        tpl_type_value: '',
        tpl_type_name: '',
        check_module: '',
        tpl_config: []
      },
      formRules: {
        tpl_name: [
          { required: true, message: '请输入检查模板名称', trigger: 'blur' }
        ],
        tpl_type_value: [
          { required: true, message: '请选择模块类型', trigger: 'blur' }
        ],
        check_module: [
          { required: true, message: '请选择检查模块', trigger: 'blur' }
        ]
      },
      // 检查模板类型标准码
      tplTypeList: [],
      tplTypeMap: new Map(),
      // 获取检查模块列表
      requestParam: {
        module_name: '',
        is_page: 0
      },
      // 检查模块列表
      checkModuleList: {
        list: []
      },

    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    dialogStatus: {
      type: String,
      default: "create"
    },
    dialogForm: {
      type: Object
    },
    callback: {
      type: Function
    }
  },
  watch: {
    dialogVisible (newval) {
      this.visible = newval;
    },
    dialogForm: {
      handler (newval, oldval) {

        let temp = JSON.parse(JSON.stringify(newval));
        let reset = JSON.parse(JSON.stringify(this.resetForm))
        this.editTplForm = Object.assign(reset, temp)
        if (this.editTplForm.tpl_type_value !== '') {
          this.initTplType()
        }
        if (this.editTplForm.tpl_config && this.editTplForm.tpl_config[0]) {
          this.editTplForm.check_module = this.editTplForm.tpl_config[0].check_module_id
        }
      },
      deep: true
    }
  },
  methods: {
    // 初始化模板类型下拉框
    initTplType () {
      this.tplTypeList.map((item) => {
        if (item.value === this.editTplForm.tpl_type_value) {
          this.editTplForm.tpl_type = item
        }
      })
    },
    dialogClose () {
      this.$refs.moduleForm.resetFields();
      this.$emit("update:dialogVisible", false);
    },
    editModule () {
      this.$refs.moduleForm.validate(valid => {
        if (valid) {
          if (this.dialogStatus === "create") {
            this.createTpl();
          } else {
            this.updateTpl();
          }
        }
      });
    },
    createTpl () {
      CommonCheckApi.createCheckTpl({
        data: this.editTplForm
      }).then(res => {
        if (res.code === 0) {
          this.$message.success("新增检查模板成功");
          this.dialogClose();
          this.$emit("callback", "");
        }
      })
    },
    updateTpl () {
      CommonCheckApi.updateCheckTpl({
        data: this.editTplForm
      }).then(res => {
        if (res.code === 0) {
          this.$message.success("修改检查模板成功");
          this.dialogClose();
          this.$emit("callback", "");
        }
      })
    },
    // 选择模板类型
    selectTplType (data) {
      this.editTplForm.tpl_type_value = data.value
      // this.editTplForm.tpl_type_name = data.name
    },
    // 获取模板类型标准码
    getTplTypeCode () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'check-template-type'
        }
      }).then(res => {
        if (res.code === 0 && res.data.list) {
          this.tplTypeList = res.data.list
          window.localStorage.setItem('tplTypeCode', JSON.stringify(this.tplTypeList))
          this.convertCodeListToMap(this.tplTypeMap, this.tplTypeList)
        }
      })
    },
    // 将标准码列表转换为map
    convertCodeListToMap (map, codeList) {
      codeList.map((item) => {
        map.set(item.value, item)
      })
    },
    // 获取检查模块列表
    getCheckModuleList () {
      return CommonCheckApi.getCheckModuleList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.checkModuleList = res.data
        }
      })
    },
    // 选择检查模块
    selectCheckModule () {
      this.editTplForm.tpl_config = []
      this.editTplForm.tpl_config.push({
        check_module_id: this.editTplForm.check_module
      })

    }
  },
  async created () {
    let tplTypeCode = window.localStorage.getItem('tplTypeCode')
    if (tplTypeCode) {
      this.tplTypeList = JSON.parse(tplTypeCode)
      this.convertCodeListToMap(this.tplTypeMap, this.tplTypeList)
    } else {
      await this.getTplTypeCode()
    }
    await this.getCheckModuleList()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.edit-template-dialog {
  .el-select,
  .el-input {
    width: 100%;
  }
}
</style>